<template>
  <div class="cl-container">
    <div ref="areaBox" id="area-box"></div>
  </div>
</template>

<script setup lang="ts">
import { mapChart } from '@/utils/charts.js'
import { onMounted } from 'vue'
const initArea = () => {
  mapChart('area-box')
}
onMounted(() => {
  initArea()
})
</script>
<style scoped lang="scss">
.cl-container {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  color: #f00;
  font-size: vh(40);
  background: url('@/assets/images/backbg.png');
  background-size: 100% 100%;
}
#area-box {
  width: vw(900);
  height: vh(700);
  margin: vh(80) auto vh(80) auto;
}
</style>
